<template>
  <div>
    <a-menu
      mode="inline"
      :open-keys="openKeys"
      style="width: 256px"
      @openChange="onOpenChange"
    >
      <a-sub-menu v-for="(chapter, key) in setTree" :key="'sub' + (key + 1)">
        <span slot="title"
          ><a-icon type="check" /><span>{{ chapter.name }}</span></span
        >
        <a-menu-item
          :key="section.key"
          v-for="section in chapter.children"
          @click="
            saveCSdata(
              chapter.name,
              section.name,
              chapter.key,
              section.key,
              section.page_numbers
            )
          "
        >
          {{ section.name }}
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
      showPage: '',
      setTree: [], //章节树
    }
  },
  mounted() {
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    this.axios.post('/course/query_all/').then(res => {
      console.log(res)
      this.setTree =
        res.filter(item => {
          return item.name !== '计算博弈论' && item.name !== '机制设计'
        }) || []
    })
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      )
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    saveCSdata(cName, sName, cKey, sKey, pageNumbers) {
      const CSdata = { cName, sName, cKey, sKey, pageNumbers }
      this.$store.dispatch('saveCSdata', CSdata)
      let route
      route = `/study/content/${sKey}`
      this.$router.push(route)
    },
  },
}
</script>
